<template>
	<!-- <div>
		<h2>{{pageTitle}}</h2>
		<div>This is a simple page</div>
	</div> -->
	<div class="box">
		<div class="pageTitle">猫眼电影</div>
		<ul class="topNav">
			<li :class="[showHot==1?'active':'']"@click="showHot=1">正在热映</li>
			<li :class="[showHot==0?'active':'']"@click="showHot=0">即将上映</li>
		</ul>
		<div class="main">
			<hoting v-show="showHot==1"></hoting>
			<comming v-show="showHot==0"></comming>
		</div>
		
	</div>
</template>

<script>
	import hoting from '@/components/hoting.vue'
	import comming from '@/components/comming.vue'
	export default{
		name:"index",
		components:{
			hoting,comming
		},
		data(){
			return{
				showHot:1
			}
		}
	};
</script>

<style scoped>
	
	.pageTitle{
		padding: 0;
		text-align: center;
		line-height: 2;
		background-color: red;
		width:340px;
		height: 50px;
		font-size: 25px;
	}
	li{
		display: inline-block;
		list-style: none;
		text-align: center;
		font-size: 20px;
		width: 40%;
	}
	.active{
		color: rgb(229,72,71);
		border-bottom: 2px solid rgb(229,72,71);
	}
	
	
</style>
